<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVVM 示例</title>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <style> 
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- View -->
         <div v-bind:title="title" :class="{red:isred}" :style="{fontSize:BigFont}">标题</div>
        <h1>{{ message }}，当前登录{{num}},当前登录时间{{getdate()}}</h1>
        <input v-model="message" placeholder="输入内容">
        <button v-on:click="num++">点一下</button>
        <button v-on:click="num--">点一下--</button>

    <hr>   
    <label  >当前选中的课程:</label>
<select v-model="selected">
    <option value="C#">C#</option>
    <option value="HTML">HTML</option>
    <option value="CSS">CSS</option>
</select>  
<div>
    <input type="radio" v-model="selected" name="selected" value="C#">c#
    <input type="radio" v-model="selected" name="selected" value="HTML">HTML
    <input type="radio" v-model="selected" name="selected" value="CSS">CSS
</div>
<div>当前课程:{{selected}}</div>
 
<hr>
<div style="background-color: red; height: 500px;width: 500px; padding: 50px;" @click="hello('点击了div')">1
    <div style="background-color: yellow; height: 300px;width: 300px; padding: 50px;" href="www.baidu.com" @click="hello('点击了div2')">2
        <div style="background-color: blue; height: 100px;width: 100px;" @click.slef="hello('点击了div3')">3</div>
    </div>
</div>
<hr>
<ul>
    <li v-for="(item,index) in names">{{item.name}}--{{index}}</li>
</ul>
循环对象
<ul>
    <li v-for="item in obj">{{item}}</li>
</ul>
<hr>
<input type="text" v-on:keyup.Space="hello('keyup')" placeholder="输入内容">

<div v-if="show">显示</div>
<div v-else>隐藏</div>
<div v-show="show">show</div>
<button @click="show=!show">切换</button> 

<div v-if="num==1">A</div>
<div v-else-if="num==2">B</div>
<div v-else>C</div>

</div> 
    <script>
        
        // ViewModel
        const { createApp } = Vue;
        const app = createApp({
            data() {
                return {
                    // Model
                    message: 'Hello MVVM!',
                    num: 0,
                    messageText:'<a href="https://www.baidu.com">百度一下</a>',
                    title: '这是一个标题',
                    isred:false,
                    BigFont:"54px",
                    selected:"C#",
                    names:[
                        {name:'张三风'},
                        {name:'李四'},
                        {name:'王五'}
                    ],
                    obj:{
                        name:'Jane',
                        arg:30,
                        sex:'男'
                    },
                    show:true
                };
            }, 
            methods: {
                getdate(){
                    return new Date().toLocaleString();
                },
                // Model
                updateMessage() {
                    this.message = 'Hello Vue!';
                },
                hello(msg){
                    alert(msg);
                }
            }
        });

        // 绑定到 View
        app.mount('#app');
    </script>
</body>
</html>